<template>
	<!-- 使用弹性布局，实现“两翼分居布局” -->
	<view class="container">
		<!-- 提示：竖直滚动视图，必须指定高度，否则会把页面撑高 -->
		<!-- 左侧：滚动视图 - 商品类目列表 -->
		<scroll-view class="left-view" :style="{height: winHeight+'px'}" scroll-y>
			<uni-list>
				<!-- 注意：@click要想触发，必须“开启点击反馈”  方法1：link   方法2：clickable -->
				<uni-list-item 
					v-for="(c, i) in categories" 
					:key="i" 
					:title="c.cname"
					:style="{backgroundColor: cur===i ? '#fff' : '#dfdfdf'}"
					clickable
					@click="cur = i"
				/>
			</uni-list>
		</scroll-view>
		
		<!-- 右侧：滚动视图 - 从属于当前类目下的商品列表 -->
		<scroll-view class="right-view" :style="{height: winHeight+'px'}" scroll-y>
			<text v-show="products.length===0" style="text-align: center;">暂无数据</text>
			<uni-list>
				<!-- ellipsis：省略号，显示几行文字，超出后就显示为省略号 -->
				<!-- thumb：拇指，缩略图 -->
				<!-- link：①向右的按钮  ②点击反馈  ③跳转方法 -->
				<!-- to：跳转地址 -->
				<uni-list-item 
					v-for="{lid, pic, title} in products" 
					:key="lid" 
					:title="title"
					:ellipsis="2"
					:thumb="base+pic"
					thumbSize="lg"
					link
					:to="`/pages/details/details?pid=${lid}`"
				/>
			</uni-list>
			<button type="default" v-show="hasMore" @click="goToList">加载更多</button>
		</scroll-view>
	</view>
</template>

<script>
	import { productCategory, productList, base } from '@/service'
	export default {
		data() {
			return {
				base,				//把服务器端API地址设置为Vue实例的属性
				winHeight: 0,		//窗口中内容可用区域高度
				categories: [],		//商品类目列表
				cur: -1,			//当前显示哪个类目下的商品  current
				//注意：此处的cur初始值没有使用0，而是-1 —— 数组中没有此下标
				products: [],		//商品列表
				hasMore: false,		//还有更多数据可供加载吗？
			}
		},
		async onLoad(){
			//1.获取当前系统信息（之窗口可用高度）
			//uni.getSystemInfo()  //异步的，通过回调方式获取结果
			//uni.getSystemInfoSync() //同步的，通过返回值方式获取结果
			let {windowHeight} = uni.getSystemInfoSync()
			this.winHeight = windowHeight
			//2.访问后端接口，获取商品类目列表
			let data = await productCategory()
			// this.categories = data.concat(data)
			this.categories = [...data, ...data]
			this.cur = 0	//加载完数据，让类别中的第0个成为“当前项目”
		},
		methods: {	
			goToList(){
				//跳转到商品列表页，跳转时携带参数：kw
				let kw = this.categories[this.cur].keywords
				uni.navigateTo({
					url:`/pages/list/list?kw=${kw}`
				})
			}
		},
		watch: {
			async cur(){	//在watch中监视同名模型数据的改变
				//console.log('模型数据改变了：', this.cur)
				let kw = this.categories[ this.cur ].keywords
				let {data, pno, pageCount} = await productList(1, kw)
				this.products = data
				if(pno<pageCount){		//如果当前页号小于总页数，说明还有更多数据
					this.hasMore = true
				}else {					//否则如果当前页号不小于总页数，说明没有更多数据了
					this.hasMore = false
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	//弹性容器主轴方向：横轴 
	flex-direction: row;
	.left-view {
		width: 94px;
		//弹性子元素的增长权重：0
		flex-grow: 0;
		//弹性子元素的收缩权重：0
		flex-shrink: 0;
		background-color: $uni-text-color-grey;
	}
	.right-view {
		//弹性子元素尺寸增长权重：1
		flex: 1;
	}
}
</style>
